import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')
/*
父组件传递数据给子组件
    通过props传递，父组件给子组件以自定义属性的形式传递，子组件通过props选项声明来接收传递过来的数据

     <!--父组件在使用子组件show-info的时候传递props-->
    <show-info :name="'陶品奇'" :age="22" :height="175" class="info" id="info-box1"></show-info>

    //子组件通过props接收父组件传递过来的props(数组语法 不能对类型进行验证指定必填项和默认值)
    //props: ["name", "age", "height"]
    props: {
    name: {
      type: String,//props的数据类型
      default: "",//props的默认值
      required: true,//props为必填项
      validator: (value) => {//自定义校验规则
        return typeof value === "string";
      }
    },
    age: {
      type: Number,
      default: 1,
      required: true
    },
    height: {
      type: Number,
      default: 1,
      required: true
    },
    person: {
      type: Object,
      default: () => {
      } // 对象类型的默认值default必须是一个函数然后返回一个对象
    },
    names: {
      type: Array,
      default: () => []// 数组类型的默认值default必须是一个函数然后返回一个数组
    }
  },


非prop的attribute
    当我们给组件传递某个属性的时候，但是该属性没有定义对应的props或者emits时，就称之为非prop的attirbute
    常见的包括class、style、id等
    当组件有单个根节点时，非prop的attribute将自动添加到组件的根节点中
    ```vue
        <show-info :name="'陶品奇'" :age="22" :height="175" class="info" id="info-box1"></show-info>
        <show-info :name="'马云'" :age="65" :height="156" class="info" id="info-box2"></show-info>
    ```

禁用非prop的attribute
    如果不希望非prop的attribute被添加到组件的根节点中可以在子组件中使用 inheritAttrs：false禁用
    可以使用$attrs来访问所有的非props的attribute

* */